<template>
    <div class='only-page'>
        <img :src="obj.img" alt="">
        <p>{{ obj.content }}</p>
        <p style="color: #ffaa0f">{{ obj.price | Ren }}</p>
        <button v-if="bool" @click="bool = false">修改价格</button>
        <div v-else>
            <input type="text" v-model.number="price"><br>
            <button @click="butn">确认</button><button @click="bool = true">取消</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'only-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            bool: true,
            price: '',
        }
    },
    methods: {
        butn() {
            this.modifyP(this.price, this.obj.id)
            this.bool = true
            this.price = ''
        }
    },
    filters: {
        Ren(val) {
            return "￥" + val
        }
    },
    props: {
        obj: Object
    },
    inject: {
        modifyP: 'modifyP'
    }
}
</script>

<style scoped>
.only-page {
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 60px;
    padding: 5px;
    font-size: 16px;
    text-align: left;
}

img {
    width: 100%;
    height: 280px;
    object-position: bottom left;
    object-fit: cover;
}

p {
    margin: 5px;
}

input {
    font-size: 14px;
}

button {
    font-size: 14px;
}
</style>